<script setup lang="ts">
import { ref } from "vue"

const buildingList = ref([
  {
    id: 1,
    name: "昆明hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh",
    coordinateX: 102.7183,
    coordinateY: 25.038933,
    status: 0,
    imgUrl: "",
  },
  {
    id: 2,
    name: "北京",
    coordinateX: 116.407396,
    coordinateY: 39.9042,
    status: 0,
    imgUrl: "",
  },
  {
    id: 3,
    name: "上海",
    coordinateX: 121.4737,
    coordinateY: 31.230416,
    status: 2,
    imgUrl: "",
  },
  {
    id: 4,
    name: "广州",
    coordinateX: 113.2644,
    coordinateY: 23.1291,
    status: 1,
    imgUrl: "",
  },
  {
    id: 5,
    name: "深圳",
    coordinateX: 114.0579,
    coordinateY: 22.5431,
    status: 0,
    imgUrl: "",
  },
  {
    id: 6,
    name: "成都",
    coordinateX: 104.0668,
    coordinateY: 30.5728,
    status: 1,
    imgUrl: "",
  },
  {
    id: 6,
    name: "成都",
    coordinateX: 104.0668,
    coordinateY: 30.5728,
    status: 1,
    imgUrl: "",
  },
  {
    id: 6,
    name: "成都",
    coordinateX: 104.0668,
    coordinateY: 30.5728,
    status: 1,
    imgUrl: "",
  },
  {
    id: 6,
    name: "成都",
    coordinateX: 104.0668,
    coordinateY: 30.5728,
    status: 1,
    imgUrl: "",
  },
  {
    id: 6,
    name: "成都",
    coordinateX: 104.0668,
    coordinateY: 30.5728,
    status: 1,
    imgUrl: "",
  },
  {
    id: 6,
    name: "成都",
    coordinateX: 104.0668,
    coordinateY: 30.5728,
    status: 1,
    imgUrl: "",
  },
  {
    id: 6,
    name: "成都",
    coordinateX: 104.0668,
    coordinateY: 30.5728,
    status: 1,
    imgUrl: "",
  },
])
</script>

<template>
  <div class="chart">
    <div class="chart-header">
      <h2>楼宇列表</h2>
    </div>
    <div class="chart-body">
      <ul>
        <li v-for="item in buildingList" :key="item.id">
          <span class="name">{{ item.name }}</span>
          <span
            class="status"
            :style="{
              color:
                item.status === 0
                  ? '#00ff00'
                  : item.status === 1
                  ? '#ffff00'
                  : '#ff0000',
            }"
            >{{
              item.status === 0
                ? "可以使用"
                : item.status === 1
                ? "暂停使用"
                : "禁止使用"
            }}</span
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
  .chart-header {
    height: 15%;
    border-bottom: 1px solid rgba(7, 118, 181, 0.7);
    font-weight: 500;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    &::before {
      position: absolute;
      content: "";
      width: 6px;
      height: 6px;
      background: rgba(22, 214, 255, 0.9);
      box-shadow: 0 0 5px rgba(22, 214, 255, 0.9);
      border-radius: 10px;
      left: 10px;
      top: 50%;
      transform: translate(0, -50%);
    }
    &::after {
      width: 100%;
      height: 1px;
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
      box-shadow: 0 0 5px rgba(131, 189, 227, 1);
      opacity: 0.6;
    }
    h2 {
      font-weight: 500;
      font-size: 16px;
      margin-left: 30px;
    }
  }
  .chart-body {
    height: 85%;
    padding: 0 10px 10px;

    ul {
      height: 100%;
      overflow-y: hidden;
      &:hover {
        overflow-y: auto;
      }
      li {
        padding: 10px;
        border-bottom: 1px dotted #407abd;
        white-space: nowrap;
        display: flex;
        font-size: 14px;

        .name {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(255, 255, 255, 0.8);
        }
        .status {
          width: 100px;
          text-align: right;
          color: rgba(255, 255, 255, 0.8);
          opacity: 0.8;
        }

        &:nth-last-child(1) {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
